<!DOCTYPE html>
<html>
  <head>
    <title>sfas.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script>
    $(function () {
        $("ul.pagination li.disabled a").click(function () {
            return false;
        });
    });
</script>
  </head>
  
  <body>
    <nav class="pageDIV">
    <ul class="pagination">
        <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
            <a  href="?page.start=0">
                <span>«</span>
            </a>
        </li>

        <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
            <a  href="?page.start=${page.start-page.count}">
                <span>‹</span>
            </a>
        </li>

        <c:forEach begin="0" end="${page.totalPage-1}" varStatus="status">

    		<c:if test="${status.count*page.count-page.start<=30 && status.count*page.count-page.start>=-10}">
     		   <li <c:if test="${status.index*page.count==page.start}">class="disabled"</c:if>>
          		  <a href="?page.start=${status.index*page.count}"
          		  <c:if test="${status.index*page.count==page.start}">class="current"</c:if>>${status.count}
          		  </a>
        	   </li>
   				</c:if>
		</c:forEach>

        <li >
            <a href="?page.start=${page.start+page.count}">
                <span>›</span>
            </a>
        </li>
        <li >
            <a href="?page.start=${page.last}">
                <span>»</span>
            </a>
        </li>
    </ul>
</nav>
  </body>
</html>
